<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
    	<meta name="viewport" content="width=device-width, initial-scale=1.0">
        	<title>实验十六 使用 JavaScript 构建骰子游戏</title>
            	<style>
                	.container {
                    		width: 70%;
                            		margin: auto;
                                    		text-align: center;
                                            	}

                                                	.dice {
                                                    		text-align: center;
                                                            		display: inline-block;
                                                                    		margin: 10px;
                                                                            	}

                                                                                	body {
                                                                                    		background-image: url(https://labfile.oss.aliyuncs.com/courses/8605/bg-451838.jpeg);
                                                                                            		background-size: 100% 100%;
                                                                                                    		height: 95vh;
                                                                                                            		margin: 0;
                                                                                                                    	}

                                                                                                                        	h1 {
                                                                                                                            		margin: 30px;
                                                                                                                                    		font-family: "Lobster", cursive;
                                                                                                                                            		text-shadow: 5px 0 #232931;
                                                                                                                                                    		font-size: 4.5rem;
                                                                                                                                                            		color: #4ecca3;
                                                                                                                                                                    		text-align: center;
                                                                                                                                                                            	}

                                                                                                                                                                                	p {
                                                                                                                                                                                    		font-size: 2rem;
                                                                                                                                                                                            		color: #4ecca3;
                                                                                                                                                                                                    		font-family: "Indie Flower", cursive;
                                                                                                                                                                                                            	}

                                                                                                                                                                                                                	img {
                                                                                                                                                                                                                    		width: 100%;
                                                                                                                                                                                                                            	}

                                                                                                                                                                                                                                	.bottom {
                                                                                                                                                                                                                                    		padding-top: 30px;
                                                                                                                                                                                                                                            	}

                                                                                                                                                                                                                                                	.butn {
                                                                                                                                                                                                                                                    		background: #4ecca3;
                                                                                                                                                                                                                                                            		font-family: "Indie Flower", cursive;
                                                                                                                                                                                                                                                                    		border-radius: 7px;
                                                                                                                                                                                                                                                                            		color: #ffff;
                                                                                                                                                                                                                                                                                    		font-size: 30px;
                                                                                                                                                                                                                                                                                            		padding: 16px 25px 16px 25px;
                                                                                                                                                                                                                                                                                                    		text-decoration: none;
                                                                                                                                                                                                                                                                                                            	}

                                                                                                                                                                                                                                                                                                                	.butn:hover {
                                                                                                                                                                                                                                                                                                                    		background: #232931;
                                                                                                                                                                                                                                                                                                                            		text-decoration: none;
                                                                                                                                                                                                                                                                                                                                    	}
                                                                                                                                                                                                                                                                                                                                        	.page-footer {
                                                                                                                                                                                                                                                                                                                                            	  position: fixed;
                                                                                                                                                                                                                                                                                                                                                  	  right: 0;
                                                                                                                                                                                                                                                                                                                                                        	  bottom: 20px;
                                                                                                                                                                                                                                                                                                                                                              	  display: flex;
                                                                                                                                                                                                                                                                                                                                                                    	  align-items: center;
                                                                                                                                                                                                                                                                                                                                                                          	  padding: 5px;
                                                                                                                                                                                                                                                                                                                                                                                	  color: black;
                                                                                                                                                                                                                                                                                                                                                                                      	  background: rgba(255, 255, 255, 0.65);
                                                                                                                                                                                                                                                                                                                                                                                            	}
                                                                                                                                                                                                                                                                                                                                                                                                	
                                                                                                                                                                                                                                                                                                                                                                                                    	.page-footer a {
                                                                                                                                                                                                                                                                                                                                                                                                        	  display: flex;
                                                                                                                                                                                                                                                                                                                                                                                                              	  margin-left: 4px;
                                                                                                                                                                                                                                                                                                                                                                                                                    	}
                                                                                                                                                                                                                                                                                                                                                                                                                        	.touxiang{
                                                                                                                                                                                                                                                                                                                                                                                                                            		width:24px;
                                                                                                                                                                                                                                                                                                                                                                                                                                    		height:24px;
                                                                                                                                                                                                                                                                                                                                                                                                                                            	}
                                                                                                                                                                                                                                                                                                                                                                                                                                                </style>

                                                                                                                                                                                                                                                                                                                                                                                                                                                </head>

                                                                                                                                                                                                                                                                                                                                                                                                                                                <body>
                                                                                                                                                                                                                                                                                                                                                                                                                                                  <div class="container">
                                                                                                                                                                                                                                                                                                                                                                                                                                                      <h1>让我们开始吧</h1>

                                                                                                                                                                                                                                                                                                                                                                                                                                                          <div class="dice">
                                                                                                                                                                                                                                                                                                                                                                                                                                                                <p class="Player1">玩家 1</p>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                      <img class="img1" src="dice6.png">
                                                                                                                                                                                                                                                                                                                                                                                                                                                                          </div>

                                                                                                                                                                                                                                                                                                                                                                                                                                                                              <div class="dice">
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    <p class="Player2">玩家 2</p>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          <img class="img2" src="dice6.png">
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              </div>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                </div>

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  <div class="container bottom">
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      <button type="button" class="butn"
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            onClick="rollTheDice()">
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  掷骰子
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      </button>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        </div>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          <div class="container bottom">
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              <button type="button" class="butn"
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    onClick="editNames()">
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          编辑玩家姓名
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              </button>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                </div>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  <footer class="page-footer">
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    <span>made by </span>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      <a href="https://haiyong.site/moyu" target="_blank">
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        <img class="touxiang"  src="https://haiyong.site/img/favicon.png" alt="George Martsoukos logo">
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          </a>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            </footer>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            </body>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            <script>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              // 玩家姓名
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                var player1 = "Player 1";
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  var player2 = "Player 2";

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    // 改变玩家姓名的功能
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      function editNames() {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          player1 = prompt("更改玩家 1 名称");
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              player2 = prompt("更改玩家 2 名称");

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  document.querySelector("p.Player1").innerHTML = player1;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      document.querySelector("p.Player2").innerHTML = player2;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        }

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          // 掷骰子的功能
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            function rollTheDice() {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                setTimeout(function () {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      var randomNumber1 = Math.floor(Math.random() * 6) + 1;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            var randomNumber2 = Math.floor(Math.random() * 6) + 1;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  document.querySelector(".img1").setAttribute("src", "dice" + randomNumber1 + ".png");

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        document.querySelector(".img2").setAttribute("src", "dice" + randomNumber2 + ".png");

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              if (randomNumber1 === randomNumber2) {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      document.querySelector("h1").innerHTML = "平局!";
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            } else if (randomNumber1 < randomNumber2) {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    document.querySelector("h1").innerHTML = (player2 + "获得胜利!");
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          } else {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  document.querySelector("h1").innerHTML = (player1 + "获得胜利!");
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            }, 1000);
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              </script>

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              </html>